/* Empty. Add your own CSS if you like */
.pane, .view {
    background-color: #f8f8f8;
}

.label {
    display: inline-block;
    padding: 2px 5px;
    background-color: rgba(164, 164, 164, 0.7);
    border-radius: 3px;
}

ion-view[hide-nav-tab] ion-content.has-tabs {
    bottom: 0;
}

.tab-nav {
    transition: transform 125ms ease-in-out;
}

.tab-nav.hide {
    display: block;
    transform: translate3d(0, 50px, 0) !important;
}

ion-header-bar{
    opacity: 1;
    transition: opacity 125ms ease-in-out;
}

.bar-fade{
    opacity: 0;
}

.bar .button.button-clear {
    padding-left: 5px;
    padding-right: 5px;
    font-size: 14px;
}

.bar .button.button-clear .icon:before {
    font-size: 26px;
}

.no-border{
    border: none;
}

.bar-header-box{
    overflow: hidden;
    position: relative;
    height: 44px;
    width: 100%;
}

.bar-header-box > .bar-header{
    transition: transform ease-in-out 125ms;
}

.action-btn-box{
    height: 48px;
    position: absolute;
    bottom: 0;
    width: 100%;
    overflow: hidden;
    background-color: #f8f8f8;
}

.action-box > .row{
    transform: translate3d(0,-50px,0);
    transition: transform ease-in-out 125ms;
}

.action-btn-box .button{
    margin-top: -2px;
    height: 34px;
    min-height: 34px;
    line-height: 32px;
    margin-bottom: 0px;
    background-color: #fff !important;
}

@media (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
    .bar.no-border{
        background-size: 0px;
    }
}

/*********************
 *** home/home-view ***
 *********************/
.home-view .hero-box {
    background-color: #444;
    margin-top: 44px;
    height: 122px;
}

.home-view .hero-box > .row > .col {
    position: relative;
}

.home-view .hero-tap-box {
    color: #fff;
    width: 100%;
    font-size: 48px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 10px;
}

.home-view .hero-tap-box label {
    margin-top: 5px;
    display: block;
}

.home-view ion-content {
    margin-top: 121px;
}

/*********************
 *** home/grid-box ***
 *********************/

.grid-box {
    clear: both;
    height: 275px;
    overflow: hidden;
}

app-thumb {
    height: 92px;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    width: 25%;
    float: left;
}

app-thumb > .button {
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

app-thumb > .button:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

app-thumb > .button > .icon:before {
    font-size: 30px;
}

app-thumb > .button > label {
    display: block;
    font-size: 12px;
}

.ad-box {
    margin-top: 15px;
    margin-bottom: 15px;
}

.ad-box .slider-pager {
    bottom: 5px;
}

.ad-box .slider-pager .slider-pager-page.active {
    color: #387ef5;
}

.ad-box .slider-pager .slider-pager-page {
    color: #fff;
    font-size: 10px;
    width: 10px;
    opacity: 1;
}

ad-thumb {
    width: 100%;
}

ad-thumb > a {
    width: 100%;
    height: 80px;
    display: block;
    background-size: cover;
    background-position: center;
}

/*********************
 *** friend/list   ***
 *********************/

.friend-view .selection-bar{
    top: 44px;
}

.friend-list{
    top: 44px;
}

.friend-list .list{
    transform: translate3d(-50px,0,0);
    margin-right: -50px;
    transition: transform ease-in-out 125ms;
    z-index: 1;
}

.friend-list .item-avatar:first-child {
    border-top: none;
}

.friend-list .item-avatar.item-complex {
    min-height: 66px;
}
.friend-list .item-avatar.item-complex.selected{
    background-color: #f3f3f3;
}

.friend-list .item-avatar.item-complex > .item-content {
    padding: 10px 10px 10px 116px;
    min-height: 66px;
    background: transparent;
}
.friend-list .item-avatar.item-complex.selected > .item-content{
    background: transparent;
}

.friend-list .item-avatar.item-complex > .item-content > img:first-child {
    border-radius: 3px;
    top: 10px;
    left: 60px;
    max-height: 46px;
    max-width: 46px;
}

.friend-list .item-delete .button.icon{
    color: #ccc;
}

.friend-list .item-delete .button.icon.ion-ios-checkmark{
    color: #387ef5;
}

.friend-list .item-left-edit{
    display: block;
    transform: translate3d(8px, 0, 0);
    opacity: 1;
}

.dialog-item.item-avatar {
    padding: 10px 10px 10px 56px;
    min-height: 66px;
    background-color: transparent;
    border: none;
}

.dialog-item.me.item-avatar {
    padding: 10px 56px 10px 10px;
}

.dialog-item.item-avatar > p {
    padding: 8px 10px;
    background-color: #fff;
    border-radius: 5px;
    font-size: 14px;
    color: #333;
    border: 1px solid #eee;
    float: left;
    max-width: 70%;
    white-space: initial;
    overflow: visible;
}

.dialog-item.me.item-avatar > p {
    float: right;
}

.dialog-item.item-avatar > p.zz {
    padding: 10px 10px;
    background-color: #2CACF7;
    color: #fff;
    border-color: #199DEA;
}

.dialog-item.item-avatar > p.zz > span {
    display: block;
    background-color: #fff;
    color: #888;
    padding: 5px 10px;
    margin: 10px -11px -11px -11px;
    border: 1px solid #eee;
    border-top: none;
    border-radius: 0 0 5px 5px;
    font-size: 12px;
}

.dialog-item.item-avatar > img:first-child {
    border-radius: 3px;
    top: 10px;
    left: 10px;
    height: 36px;
    width: 36px;
}

.dialog-item.me.item-avatar > img:first-child {
    left: auto;
    right: 10px;
}

/****************************
 *   explore/category-box   *
 ****************************/

.category-box {
    clear: both;
    overflow: hidden;
    background-color: #fff;
    padding-top: 10px;
    padding-bottom: 8px;
    margin-bottom: 15px;
}

category-thumb {
    height: 70px;
    width: 25%;
    float: left;
}

category-thumb > .button {
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

category-thumb > .button.button-light.active,
category-thumb > .button.button-light.activated {
    box-shadow: none;
}

category-thumb > .button:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

category-thumb > .button > .icon:before {
    font-size: 26px;
}

category-thumb > .button > .icon {
    display: inline-block;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
}

category-thumb > .button > label {
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

/****************************
 *   explore/location-bar   *
 ****************************/

.location-bar {
    margin-bottom: 0px;
}

.location-bar > .item:first-child {
    border-top: none;
}

.location-bar > .item {
    color: #999;
    font-size: 14px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
}

.location-bar > .item > .icon:before {
    font-size: 20px;
}

/*****************************
 *   explore/promotion-box   *
 *****************************/

.promotion-box {
    clear: both;
    height: 159px;
    overflow: hidden;
    margin-bottom: 15px;
}

promotion-thumb {
    height: 80px;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff;
    width: 50%;
    float: left;
}

promotion-thumb > .button {
    border: none;
    border-radius: 0;
    width: 100%;
    height: 100%;
}

promotion-thumb > .button:after {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

promotion-thumb > .button > .icon:before {
    font-size: 30px;
}

promotion-thumb > .button > label {
    display: block;
    font-size: 12px;
}

promotion-thumb .inner-box {
    position: relative;
    width: 100%;
    height: 100%;
    padding-left: 60px;
    text-align: right;
}

promotion-thumb .inner-box > img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    position: absolute;
    left: 0px;
    top: -8px;
}

promotion-thumb .inner-box > h4 {
    margin-top: 20px;
    margin-bottom: 2px;
    font-size: 16px;
}

promotion-thumb .inner-box > p {
    margin-bottom: 0;
    line-height: 20px;
    font-size: 12px;
    color: #aaa;
}

/*************************
 *   explore/store-box   *
 *************************/

.store-box {
    background-color: #fff;
}

.store-box .item-divider {
    background-color: #fff;
    font-size: 14px;
}

.store-box .item-divider:first-child {
    border-top: none;
}

.store-box .item-divider:last-child {
    border-bottom: none;
}

.store-box .item-divider.more {
    text-align: center;
    color: #888;
    font-weight: 100;
}

.store-item.item-thumbnail-left {
    min-height: 80px;
    padding-bottom: 10px;
    margin-left: 15px;
    border-left: none;
    padding-left: 90px;
}

.store-item.item-thumbnail-left > img:first-child {
    left: 0;
    max-height: 66px;
}

.store-item.item-thumbnail-left h4 {
    font-size: 14px;
    margin-bottom: 5px;
    margin-top: 5px;
}

.store-item.item-thumbnail-left .row,
.store-item.item-thumbnail-left .col {
    padding: 0;
}

.store-item.item-thumbnail-left .col p {
    font-size: 12px;
}

.store-item.item-thumbnail-left .col p.discount {
    font-size: 14px;
    color: #ef473a;
    margin-top: -2px;
}

.store-item.item-thumbnail-left .col p.discount > span:first-child {
    font-size: 20px;
    margin-right: 4px;
}

.store-item.item-thumbnail-left .col.right-side {
    text-align: right;
}

/*************************
 *   store/store-view   *
 *************************/
.store-view ion-content {
    top: 0;
}

.store-view .store-bg,
.store-view .mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.store-view .store-bg {
    z-index: -2;
    overflow: hidden;
}

.store-view .store-bg > img {
    width: 110%;
    margin-top: -5px;
    margin-left: -5px;
    margin-right: -5px;
    filter: blur(5px);
    -webkit-filter: blur(5px);
}

.store-view .mask {
    z-index: -1;
    background: rgba(0, 0, 0, 0.3);
}

/*************************
 *   store/action-box   *
 *************************/

.action-box {
    background: transparent;
    border: none;
    padding: 54px 15px 10px;
    text-align: center;
    position: relative;
}

.action-box > h1 {
    font-size: 80px;
    line-height: 1;
    color: #fff;
}

.action-box > h1 > span {
    font-size: 20px;
}

.action-box > p {
    color: #fff;
    font-size: 12px;
}

.action-box > button {
    border: none;
    min-height: 36px;
    line-height: 36px;
    border-radius: 5px;
}

/*************************
 *   store/info-box   *
 *************************/

.info-box {
    border: none;
    padding: 0;
    background-color: #f8f8f8;
    min-height: 400px;
}

.info-box .item {
    padding-top: 10px;
    padding-bottom: 10px;
}

.info-box .list .item:first-child {
    border-top: none;
}

.info-box .list .item:last-child {
    border-bottom: none;
}

.info-box .item > span {
    font-size: 13px;
}

.info-box .item-avatar-right {
    min-height: 62px;
}

.info-box .item-avatar-right > img:first-child {
    top: 9px;
    border-radius: 3px;
}

.info-box .item-avatar-right > p {
    font-size: 12px;
}

.info-box .item-icon-right {
    padding-right: 40px;
}

.info-box .item-icon-right > span {
    font-size: 13px;
}

.info-box .item-icon-right > .item-note {
    line-height: 22px;
}

.info-box .item-icon-right > .icon:before {
    font-size: 24px;
    color: #888;
}

.info-box .comment-item {
    white-space: initial;
    padding-top: 5px;
}

.info-box .comment-item > button {
    margin-top: 5px;
}

.info-box .button-item {
    background: transparent;
}

.info-box .button-item > button {
    border: none;
    min-height: 36px;
    line-height: 36px;
}

/*************************
 *   mew/index   *
 *************************/
.me-view .list{
    margin-bottom: 15px;
}

.me-view .list > .item:first-child {
    border-top: none;
}
.me-view .list > .item:last-child {
    border-bottom: none;
}

.me-view .list > .item{
    padding-top: 10px;
    padding-bottom: 10px;
}

.me-view .list > .item-avatar-left {
    padding-left: 75px;
}

.me-view .list > .item-avatar-left > img {
    top: 10px;
    border-radius: 3px;
    max-width: 50px;
    max-height: 50px;
}
.me-view .list > .item-avatar-left  h3{
    margin-top: 5px;
    font-size: 16px;
}
.me-view .list > .item-avatar-left  h3 > span{
    font-size: 12px;
    color: #888;
    margin-left: 10px;
}
.me-view .list > .item-avatar-left  p{
    font-size: 13px;
}
.me-view .list > .item-icon-right > .icon:before{
    font-size: 26px;
    color: #888;
}
.me-view .list > .item.btn-bar{
    padding: 0;
}
.me-view .list > .item.btn-bar button{
    border: none;
    margin: 0;
    padding-left: 15px;
    padding-right: 15px;
    text-align: left;
    min-height: 42px;
    border-left: 1px solid #ddd;
    border-radius: 0;
}
.me-view .list > .item.btn-bar button > .icon{
    margin-right: 10px;
}
.me-view .list > .item > .row{
    padding: 0;
}
.me-view .list > .item > .row > .col{
    padding: 0;
}

.me-view .do-box .item:first-child > h2{
    font-size: 26px;
}
.me-view .do-box .item:first-child > p.balanced{
    font-size: 12px;
    color: #33cd5f;
}

.area-button-group,
.area-button-group > .row,
.area-button-group > .row >col{
    padding: 0 !important;
}
.area-button-group > .row + .row{
    margin-top: 0;
}
.area-button-group .area-button {
    margin: 0;
    border-radius: 0;
    border: none;
    padding-left: 15px;
    padding-right: 15px;
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    color: #333;
    min-height: 62px;
    line-height: 14px;
}
.area-button-group .area-button > .icon{
    margin-right: 10px;
}
.area-button-group .area-button > div{
    line-height: 14px;
    font-size: 12px;
    color: #888;
    padding-left: 36px;
    float: left;
    position: relative;
}
.area-button-group .area-button > div > .icon{
    position: absolute;
    display: block;
    float: left;
    left: 0px;
    top: 0px;
}
.area-button-group .area-button > div > p{
    font-size: 12px;
}

.area-button-group .area-button > div > .icon:before{
    line-height: 20px;
}
.area-button-group > .row:last-child .area-button{
    border-bottom: none;
}
.area-button-group > .row > .col:first-child .area-button{
    border-left: none;
}
.area-button-group.text-left .area-button{
    text-align: left;
}
/*************************
 *   info   *
 *************************/
.info-view .list{
    margin-bottom: 15px;
}
.info-view .list > .item:first-child {
    border-top: none;
}
.info-view .list > .item:last-child {
    border-bottom: none;
}

.info-view .list > .item{
    padding-top: 10px;
    padding-bottom: 10px;
}
.info-view .list > .item > span{
    font-size: 14px;
}
.info-view .list > .item > .item-note{
    font-size: 13px;
}
.info-view .list > .item > img {
    border-radius: 3px;
    max-width: 28px;
    max-height: 28px;
    float: left;
    margin-right: 10px;
}
.info-view .list > .info-item{
    line-height: 26px;
}
.info-view .list:first-child{
    margin-top: 15px;
}
.info-view .list > .item-icon-left{
    padding-left: 52px;
}
.info-view .list > .item-icon-left > .icon:first-child:before{
    font-size: 28px;
}
.info-view .list > .item-icon-right{
    padding-right: 30px;
}
.info-view .list > .item-icon-right > .icon:last-child{
    right: 0px;
}
.info-view .list > .item-icon-right > .icon:last-child:before{
    font-size: 20px;
    color: #aaa;
}

.frame-view ion-content > .scroll{
    height: 100%;
}
